<template>
<view class="section-main" :class="{open:isOpen==false}" > 
<view class="toopen" @click="isOpen=true" v-if="isOpen==false">点击展开全部</view>
<view  ref="fx">
  <view v-for='item in data' :key="item.id" class="section">
    <view class="section-level" @click="showList(item)">{{item.chain_name}} <span class="red1" v-show="isXzt" :class="!item.company_total?'color3':''">({{item.company_total}})</span></view>
    <view class="section-content">
      <view :class="[item1.hasGChild?'has-grandchild':item1.hasChild>5?'has-children has-children1':'has-children', item1.company_total==0?'none':'',item1.company_total==0?'yans':'wus' ,'node','level1']" v-for="item1 in item.children" :key="item1.id">
        <view class="a" :class="(!item1.company_total)?'color3':item1.company_total<=2?'color5':'color2'" @click="showList(item1)">{{item1.chain_name}}&nbsp;<span class="red" v-show="isXzt">({{item1.company_total}})</span></view>
        <view :class="[item2.hasChild>5?'has-children has-children1':'has-children',item2.company_total==0&&item2.hasChild?'none':'','node',item2.company_total==0?'yans':'wus',item1.hasGChild?'level1':'']" v-for="item2 in item1.children" :key="item2.id">
          <view class="a" :class="(!item2.company_total)?'color3':item2.company_total<=2?'color4':'color2'" @click="showList(item2)">{{item2.chain_name}}&nbsp;<span class="red" v-show="isXzt" :class="!item2.company_total?'color3':item2.company_total<=2?'color4':''">({{item2.company_total}})</span></view>
          <view class="node level3" :class="item3.company_total==0?'yans':'wus'" v-for="item3 in item2.children" :key="item3.id">
            <view class="a" :class="(!item3.company_total)?'color3':item3.company_total<=2?'color4':'color2'" @click="showList(item3)">{{item3.chain_name}}&nbsp;<span class="red" v-show="isXzt" :class="!item3.company_total?'color3':item3.company_total<=2?'color4':''">({{item3.company_total}})</span></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="" style="text-align: center;margin-top: 10px; color: #007AFF;" @click="isOpen=false" v-if="isOpen==true">点击收起</view>
</view>
</template>
<script>
import {myIndustrychain} from '@/utils/api.js'
export default {
	props:{
		isQg:{
			default:false
		}
	},
  data(){
    return{
      data:[],
      chain_name:'',

      nodeQiang:[{chain_name:''}],
      nodeBu:[{chain_name:''}],
      nodeYan:[{chain_name:''}],
      nodeQue:[{chain_name:''}],

      nodeListAll:[],

      chain:{city_name:'',park_name:'',},
      isXzt:true,
			city_id:uni.getStorageSync('myCity').id,
			
			isOpen:false
    }
  },
  components:{
   
  },
  computed:{

  },
  created(){
		this.city_id = this.isQg?1:this.city_id
  },
  watch:{
   
  },
  mounted(){
  },
  methods:{
    showList(item){
      this.$emit('showList',item,this.isQg?'quan':false)
    },
    init(item){
			console.log(item)
      this.this_chain_id=item.id
      this.changeInit(item)
      this.chain_name=item.chain_name
    },
    async changeInit(chain){
      let data = {
        com_total_flag:1,
        chain_id:chain.id,
        id:uni.getStorageSync('role_id'),
        city_id:this.city_id,
      }
      this.park_id=''
      this.chain = chain
      // //缓存
      // let chainItem = 'chainItem'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // let nodeQiang = 'nodeQiang'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // let nodeBu = 'nodeBu'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // let nodeYan = 'nodeYan'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // let nodeQue = 'nodeQue'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // let nodeListAll = 'nodeListAll'+ chain.id + '-city'+ (this.park_id?'':this.city_id)+'-park'+ (this.park_id||'')
      // if(uni.getStorageSync(chainItem)){
      //   this.data = uni.getStorageSync(chainItem)
      //   this.nodeQiang = uni.getStorageSync(nodeQiang )
      //   this.nodeBu = uni.getStorageSync(nodeBu )
      //   this.nodeYan = uni.getStorageSync(nodeYan)
      //   this.nodeQue = uni.getStorageSync(nodeQue)
      //   this.nodeListAll = uni.getStorageSync(nodeListAll)
      //   this.hasChild_grand(this.data)

      //   this.$emit('lian',{
      //     qiang:this.nodeQiang,
      //     bu:this.nodeBu,
      //     yan:this.nodeYan,
      //   })
      //   return
      // }
      await myIndustrychain(data).then(res=>{
        return this.data = res.data
      })

      let chainData = {children:JSON.parse(JSON.stringify(this.data))}
      let chainData1 = JSON.parse(JSON.stringify(chainData))
      this.hasChild_grand(this.data)

      // uni.setStorageSync(chainItem , this.data)
      this.nodeList1=[]
      this.nodeList2=[]
      this.nodeListAll=[]
      this.nodeQiang=[]
      this.nodeBu=[]
      this.nodeYan=[]
      this.nodeQue=[]
      this.getNode(chainData,1)
      this.getNode(chainData1,2)
      this.nodeList1 = this.nodeList1.sort((a, b)=>b.company_total - a.company_total)
      this.nodeList1.forEach(item=>{
        if(item.company_total&&item.company_total>0){
          let item1 = this.nodeList2.find(item1=>item1.chain_name==item.chain_name)
          item.company_total1 = Math.ceil(item1.company_total/(this.park_id?2888:chain.city_type==1?34:chain.city_type==2?293:2488)) 
          this.nodeListAll.push(item)
        }else{
          this.nodeQue.push(item)
        }
      })
      this.nodeQiang = this.nodeListAll.slice(0,6)
      this.getNode(chainData.children[1],3)
      this.getNode(chainData.children[2],4)
      let nodeBuList=[],nodeYanList=[]
      this.nodeBu = this.nodeBu.sort((a, b)=>a.company_total - b.company_total)
      nodeBuList = this.nodeBu.slice(0,6)
      this.nodeBu = nodeBuList

      this.nodeYan = this.nodeYan.sort((a, b)=>a.company_total - b.company_total)
      nodeYanList = this.nodeYan.slice(0,6)
      this.nodeYan = nodeYanList
			
			// uni.setStorageSync(nodeListAll , this.nodeListAll)
			// uni.setStorageSync(nodeQiang , this.nodeQiang)
			// uni.setStorageSync(nodeBu , this.nodeBu)
			// uni.setStorageSync(nodeYan , this.nodeYan)
			// uni.setStorageSync(nodeQue , this.nodeQue)

      this.$emit('lian',{
        qiang:this.nodeQiang,
        bu:this.nodeBu,
        yan:this.nodeYan,
      })
    },
    getDDD(list){
      this.hasChild_grand(list.children)
      list.fill = '#4169DF'
      let num = (uni.getStorageSync('myCiry').type==3||this.park_id)?10:uni.getStorageSync('myCiry').type==2?50:500
      if(list.children&&list.children.length>0){
        list.children.forEach((item) => {
          let color
          if(item.company_total==0){
            color= '#595959'
          }else if(item.company_total>=num){
            color= '#00AF51'
          }else{
            color= '#ff9933'
          }
          item.fill = color
          if(item.children&&item.children.length>0){
            this.hasChild(item.children,num)
          }
        })
      }
    },
    //获取最后节点数据
    getNode(e,type){
      if(e.children && e.children.length>0){
        e.children.forEach(item=>{
          this.getNode(item,type)
        })
      }else{
        if(type==1){
          this.nodeList1.push(e)
        }else if(type==2){
          this.nodeList2.push(e)
        }else if(type==3){
          this.nodeBu.push(e)
        }else{
          this.nodeYan.push(e)
        }
      }
    },
    hasChild(item,num){
      item.forEach((item1) => {
        let color
        if(item1.company_total==0){
          color= '#595959'
        }else if(item1.company_total>=num){
          color= '#00AF51'
        }else{
          color= '#ff9933'
        }
        item1.fill = color
        if(item1.children&&item1.children.length>0){
          this.hasChild(item1.children,num)
        }
      })
    },
    hasChild_grand(list){
      list.forEach(item=>{
        if(item.children&&item.children.length>0){
          item.children.forEach(item1=>{
            item1.num = item1.children?item1.children.length:0
            if(item1.children&&item1.children.length>0){
              console.log(item1.children.length)

              item1.hasChild=item1.children.length
              item1.children.forEach(item2=>{
                item2.num = item2.children?item2.children.length:0
                if(item2.children&&item2.children.length>0){
                  item2.hasChild=item2.children.length
                  item1.hasGChild=true
                }
              })
              item1.children=item1.children.sort((a,b)=>{
                return a.num - b.num
              })
            }
          })
          item.children=item.children.sort((a,b)=>{
            return a.num - b.num
          })
        }
      })
      this.data=list
    },
  }
}
</script>
<style lang="scss" scoped>
	.toopen{
		position: absolute;
		bottom: 0;
		height: 60px;
		line-height: 80px;
		text-align: center;
		width: calc(100% - 10px);
		z-index: 10;
		background: linear-gradient(0deg, rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);
	}
	.open{
		height: 200px !important;
		min-height: 100px !important;
		overflow: hidden !important;
		position: relative !important;
		margin-bottom: 40px;
	}
.flex{
  display: flex;
}

.width140{
  width: 140px;
}
.section-main{
  position: relative;
  overflow: auto;
  width: calc(100% - 20px);
	padding: 10px;
	
	min-height: 300px;
	transition: all 0.5s;
}
.section-main_tp{
}
.section{
  display: flex;
  margin-bottom: 20px;
}
.section-level{
    position: relative;
    min-width: 40px;
    max-width: 40px;
    font-size:12px;
    font-weight:600;
    color: #fff;
    background:rgba($color: #0066CB, $alpha:1) !important;
    // background: rgba(252, 180, 14, 0.5);
    text-align: center;
    padding: 2px;
    word-break: break-all;
    border-radius: 10px 0 0 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.section-level:hover{
    color: #ff9933;
}
.section-content{
    margin-left: 4px;
    .node{
        float: left;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 2px 4px;
        width: 130px;
        // height: 36px;
        // line-height: 36px;
        font-size: 11px;
        // font-weight:600;
        text-align: center;
        border: 1px solid #0090DA;
        // border: 1px solid #FF8000;
        border-radius: 4px;
        overflow: hidden;
        color: #fff;
				.a{
					min-height: 36px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
    }
    .a:hover{
      color: #fff;
    }
    .node>.color3{
      background:rgba($color: #aaa, $alpha:1) !important;
    }
    .color4{
			// background:rgba($color: #0066CB, $alpha:1) !important;
      background:rgba($color: #ff8812, $alpha:1) !important;
    }
    .color5{
      background:rgba($color: #78d2ff, $alpha:1) !important;
    }
    .color2{
			// background:rgba($color: #ff8812, $alpha:1) !important;
      background:rgba($color: #0066CB, $alpha:1) !important;
    }
    .none>.a{
      background:rgba($color: #62C9FC, $alpha:1) !important;
    }
    .level1>.node{
      border: none;
      border-radius: 3px;
    }
    .level1>.wus{
      // background:rgba($color: #FF8000, $alpha:0.9) !important;
    }
    .has-children{
      width: auto;
      height: auto;
      max-width: 280px;
      min-width:130px;
    }
    .has-children1{
      width: auto;
      height: auto;
      max-width: 280px;
    }
    .has-grandchild>.wus{
      border: 1px dashed #0066CB;
      border-radius:4px;
      margin: 2px 4px;
    }
    .has-grandchild>.yans{
      margin: 2px 4px;
      border: 1px dashed #78d2ff;
      border-radius:4px;
    }
    .has-grandchild{
      width: auto;
      height: auto;
    }
}
.red{
  color:#fff;
}
.red1{
  color:rgb(246, 203, 12);
}
.has-children > .node {
 width:130px;
 margin:4px !important;
}
</style>